<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
    <meta name="keywords" content="百场耕耘 一路生花" />
    <meta name="description" content="百场耕耘 一路生花" />
    <title>百场耕耘 一路生花</title>
    <link href="/css/swiper.min.css" rel="stylesheet">
    <link href="/css/animate.min.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="/js/swiper.min.js"></script>
    <script type="text/javascript" src="/js/jweixin-1.6.0.js"></script>
</head>
<body>
<div class="load-wrap">
    <div class="load-box">
        <div id="load-bus"><img src="/images/bus.png"></div>
        <div id="load-bar">
            <div id="pre-load"></div>
            <div id="pre-dot"></div>
        </div>
        <div id="load-percent"></div>
    </div>
</div>
<!--<div class="isMobile"><div class="font">请在手机端访问</div></div>
<div class="isLandscape"><div class="font">请旋转手机</div></div>-->
<div class="btn_music"></div>
<audio id="myAudio" src="/images/bgMusic.mp3"  loop></audio>
<div class="page_content">
    <div class="indexSwiper swiper-container" id="swiper-container1">
        <div class="swiper-wrapper">
            <!-- 第一屏 start-->
            <div class="swiper-slide">
                <div class="section section1">
                    <img src="/images/page1_new.jpg">
                    <div class="logo"><img src="/images/page1_logo.png"></div>
                    <div class="title" ><img src="/images/page1_wenan.png"></div>
                    <div class="paizi"><img src="/images/page1_paizi.png"></div>
                    <div class="bus"><img src="/images/page1_bus.png"></div>
                    <div class="btn_start"><img src="/images/start.png"></div>
                    <audio id="busAudio" src="/images/laba.mp3"></audio>
                </div>
            </div>
            <!-- 第一屏 end-->
            <!-- 第二屏 start-->
            <div class="swiper-slide">
                <div class="section section2">
                    <div class="page2_title"><img src="/images/page2_title.png"></div>
                    <div class="flower_box">
                        <div class="flower shuzhi"><img src="/images/shuzhi.png"></div>
                        <div class="flower flower1"><img src="/images/flower_face.png"></div>
                        <div class="flower flower2"><img src="/images/flower_wenan.png"></div>
                    </div>
                    <div class="bashi"><img src="/images/bashi.png"></div>
                    <div class="arrow"></div>
                </div>
            </div>
            <!-- 第二屏 end-->
            <!-- 第三屏 start-->
            <div class="swiper-slide">
                <div class="section section3">
                    <div class="swiper-container" id="swiper-container2">
                        <div class="parallax-bg" data-swiper-parallax="-180%"><img src="/images/road.png"></div>
                        <div class="parallax-bus parallax-bus1" data-swiper-parallax-x="-1000%" data-swiper-parallax-y="400%"><img src="/images/slide2_bus.png"></div>
                        <div class="parallax-bus parallax-bus2" data-swiper-parallax-x="300%" data-swiper-parallax-y="400%"><img src="/images/slide3_bus.png"></div>
                        <div class="parallax-bus parallax-bus3" data-swiper-parallax="-600%" data-swiper-parallax-y="400%"><img src="/images/slide2_bus.png"></div>
                        <div class="parallax-bus parallax-bus4" data-swiper-parallax="2000%" data-swiper-parallax-y="400%"><img src="/images/slide3_bus.png"></div>
                        <div class="swiper-wrapper">
                            <!-- <div class="swiper-slide"> -->
                            <div class="swiper-slide">
                                <div class="img"><img src="/images/page3_img111.png"></div>
                                <div class="slide1_lupai1 abs" ><img src="/images/slide1_lupai1.png"></div>
                                <div class="slide1_lupai2 abs" ><img src="/images/slide1_lupai2.png"></div>
                                <div class="slide1_bus page3_bus abs"  ><img src="/images/slide1_bus.png"></div>
                                <div class="slide1_wenan1 abs"  ><img src="/images/slide1_wenan1.png"></div>
                                <div class="slide1_wenan2 abs"  ><img src="/images/slide1_wenan2.png"></div>
                                <div class="slide1_wenan3 abs"  ><img src="/images/slide1_wenan3.png"></div>
                                <div class="slide1_wenan4 abs"  ><img src="/images/slide1_wenan4.png"></div>
                                <div class="slide1_img1 abs"  ><img src="/images/slide1_img1.png"></div>
                                <div class="slide1_img2 abs"  ><img src="/images/slide1_img2.png"></div>
                                <div class="slide1_img3 abs"  ><img src="/images/slide1_img3.png"></div>
                                <div class="slide1_img4 abs"  ><img src="/images/slide1_img4.png"></div>
                                <div class="slide1_img5 abs"  ><img src="/images/slide1_img5.png"></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img"><img src="/images/page3_img222.png"></div>
                                <div class="slide2_lupai1 abs" ><img src="/images/slide2_lupai1.png"></div>
                                <div class="slide2_lupai2 abs"><img src="/images/slide2_lupai2.png"></div>
                                <div class="slide2_bus page3_bus abs" ><img src="/images/slide2_bus.png"></div>
                                <div class="slide2_wenan1 abs"  ><img src="/images/slide2_wenan1.png"></div>
                                <div class="slide2_wenan2 abs"  ><img src="/images/slide2_wenan2.png"></div>
                                <div class="slide2_wenan3 abs"  ><img src="/images/slide2_wenan3.png"></div>
                                <div class="slide2_img1 abs"  ><img src="/images/slide2_img1.png"></div>
                                <div class="slide2_img2 abs"  ><img src="/images/slide2_img2.png"></div>
                                <div class="slide2_img3 abs"  ><img src="/images/slide2_img3.png"></div>
                                <div class="slide2_img4 abs"  ><img src="/images/slide2_img4.png"></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img"><img src="/images/page3_img333.png"></div>
                                <div class="slide3_lupai1 abs"><img src="/images/slide3_lupai1.png"></div>
                                <div class="slide3_lupai2 abs"><img src="/images/slide3_lupai2.png"></div>
                                <div class="slide3_bus page3_bus abs"><img src="/images/slide3_bus.png"></div>
                                <div class="slide3_wenan1 abs"  ><img src="/images/slide3_wenan1.png"></div>
                                <div class="slide3_wenan2 abs"  ><img src="/images/slide3_wenan2.png"></div>
                                <div class="slide3_wenan3 abs"  ><img src="/images/slide3_wenan3.png"></div>
                                <div class="slide3_wenan4 abs"  ><img src="/images/slide3_wenan4.png"></div>
                                <div class="slide3_img1 abs"  ><img src="/images/slide3_img1.png"></div>
                                <div class="slide3_img2 abs"  ><img src="/images/slide3_img2.png"></div>
                                <div class="slide3_img3 abs"  ><img src="/images/slide3_img3.png"></div>
                                <div class="slide3_img4 abs"  ><img src="/images/slide3_img4.png"></div>
                                <div class="slide3_img5 abs"  ><img src="/images/slide3_img5.png"></div>
                                <div class="slide3_img6 abs"  ><img src="/images/slide3_img6.png"></div>
                                <div class="slide3_img7 abs"  ><img src="/images/slide3_img7.png"></div>
                                <div class="slide3_img8 abs"  ><img src="/images/slide3_img8.png"></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img"><img src="/images/page3_img444.png"></div>
                                <div class="slide4_lupai1 abs"><img src="/images/slide4_lupai1.png"></div>
                                <div class="slide4_lupai2 abs"><img src="/images/slide4_lupai2.png"></div>
                                <div class="slide4_bus page3_bus abs"><img src="/images/slide2_bus.png"></div>
                                <div class="slide4_wenan1 abs"  ><img src="/images/slide4_wenan1.png"></div>
                                <div class="slide4_wenan2 abs"  ><img src="/images/slide4_wenan2.png"></div>
                                <div class="slide4_wenan3 abs"  ><img src="/images/slide4_wenan3.png"></div>
                                <div class="slide4_wenan4 abs"  ><img src="/images/slide4_wenan4.png"></div>
                                <div class="slide4_img1 abs"  ><img src="/images/slide4_img1.png"></div>
                                <div class="slide4_img2 abs"  ><img src="/images/slide4_img2.png"></div>
                                <div class="slide4_img3 abs"  ><img src="/images/slide4_img3.png"></div>
                                <div class="slide4_img4 abs"  ><img src="/images/slide4_img4.png"></div>
                                <div class="slide4_img5 abs"  ><img src="/images/slide4_img5.png"></div>
                                <div class="slide4_img6 abs"  ><img src="/images/slide4_img6.png"></div>
                                <div class="slide4_img7 abs"  ><img src="/images/slide4_img7.png"></div>
                                <div class="slide4_img8 abs"  ><img src="/images/slide4_img8.png"></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="img"><img src="/images/page3_img555.png"></div>
                                <div class="slide5_lupai1 abs"><img src="/images/slide5_lupai1.png"></div>
                                <div class="slide5_wenan1 abs"  ><img src="/images/slide5_wenan1.png"></div>
                                <div class="slide5_wenan2 abs"  ><img src="/images/slide5_wenan2.png"></div>
                                <div class="slide5_img1 abs"  ><img src="/images/slide5_img1.png"></div>
                                <div class="slide5_img2 abs"  ><img src="/images/slide5_img2.png"></div>
                                <div class="slide5_img3 abs"  ><img src="/images/slide5_img3.png"></div>
                            </div>
                            <!-- </div> -->
                        </div>
                        <div class="swiper-scrollbar"></div>
                    </div>
                    <div class="arrow"></div>
                </div>
            </div>
            <!-- 第三屏 end-->
            <!-- 第四屏 start-->
            <div class="swiper-slide">
                <div class="section section4">
                    <img src="/images/hongbao_road.png">
                    <div class="btn_rules"><img src="/images/icon-rules.png"></div>
                    <div class="title"><img src="/images/page4_wenan.png"></div>
                    <div class="bus"><img src="/images/bus1.png"></div>
                    <div class="toy"><img src="/images/toy.png"></div>
                    <div class="btn_hongbao"><img src="/images/btn_hongbao.png"></div>
                    <div class="hongbaos"><img src="/images/hongbaos.png"></div>
                    <div class="moneybox" id="leafContainer"></div>
                    <div class="rulesPop">
                        <div class="rules_box">
                            <div class="rules_close"><img src="/images/close.png"></div>
                            <div class="rules_top"><img src="/images/rules_img.png"></div>
                            <div class="rules_con">
                                <ol>
                                    <li>本次活动对象为“常银巴士”微信小程序用户。</li>
                                    <li>中奖后奖励通过微信红包实时发放至用户微信，如因个人账户问题遭微信拦截导致领取失败，视为放弃奖励，后期不再补发。</li>
                                    <li>活动期间通过不当行为参与活动的用户，常熟农商银行有权取消其参与资格本活动在法律许可的范围内，常熟农商银行保留调整、暂停和终止活动的权利。</li>
                                </ol>
                                <p>* 活动一切解释权归主办方所有</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 第四屏 end-->
            <!-- 第五屏 start-->
            <div class="swiper-slide">
                <div class="section section5">
                    <img src="/images/page5.jpg">
                    <div class="wenan"><img src="/images/page_wenan1.png"></div>
                    <div class="bus"><img src="/images/page5_bus.png"></div>
                    <div class="page_btns">
                        <div class="hongbao_box semibold">
                            <div id="result">恭喜您抽中<span class="zhongjiang" >1.88</span>元<br>这份幸运，为‘相守’而来</div>
                        </div>
                        <div class="page_btn1"><img src="/images/page_btn1.png"></div>
                        <div class="page_btn2"><img src="/images/page_btn2.png"></div>
                    </div>
                </div>
            </div>
            <!-- 第五屏 end-->
        </div>
    </div>
    <input type="hidden" id="token" th:value="${token}">
    <input type="hidden" id="step" th:value="${step}">
    <input type="hidden" id="openid" th:value="${openid}">
</div>
<script src="/js/index.js"></script>
<script src="/js/preload.min.js"></script>
<script type="text/javascript">
    //调用
    $.QianLoad.PageLoading({
        sleep: 50
    });
</script>
<script src="/js/hongbao.js"></script>
</body>
</html>
